
@lightOrange:#F44336;
@middleGray:#dcd9d9;
@middleGrayOpacity:rgba(0, 0, 0, 0.6);
@padding:10px;
@margin:10px;
.whiteOpacity(@opacity:0.55){
	background-color:rgba(255, 255, 255, @opacity);
}

.border-set(@size:1px;@col:@middleGray){
	border:@size solid @col;
}

.border-set-radius(@r:3px,@size:1px,@color:white){
	.border-set(@size,@color);
	border-radius:@r;
}

.width-height-full(){
	width:100%;
	height:100%;
}

.margin-padding-0(){
	margin:0px;
	padding:0px;
}

button{
  	cursor: pointer;
	outline: none;
	border:none;
	color:black;
	background-color:white;
	font-size:20px;
}


html,body{
	.width-height-full;
	.margin-padding-0;
	overflow:hidden;
}

.view{
	width:100%;
	height:100%;	
}

#h5player{
	overflow:hidden;
	font-family:Microsoft YaHei,微软雅黑,MicrosoftJhengHei,华文细黑,STHeiti,MingLiu;
	font-size:0.9em;
	position:relative;
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	background-color:white;

	*{
		box-sizing:border-box;
	}	
}
/*主界面less*/
#vHome{
	header{
		background-color:@lightOrange;
		overflow:auto;
		text-align:center;
		color:white;
		button{
			padding:2px 10px 0px;
			position:absolute;
			right:8px;
			border-radius:1px;
			background-color:transparent;
			font-size:30px;
			color:white;
		}
	}
}

#h5player-con{
	background-color:white;
	height:100%;
	padding-top:10px;
	padding-bottom:155px;
	overflow:hidden;
	position:relative;

	.border-radius(){
		border:1px solid @middleGray;
		border-radius:15px;
		top:15px;		
	}

	#tabs-change{
		position:absolute;
		right:10px;
		font-size:8px;
		.border-radius;
		padding:2px 4px;
		color:blue;
		z-index:50;		
	}

	#h5p-volume{
		display:none;
		position:absolute;
		left:10px;
		.border-radius;
		padding:0px 5px;
		z-index:50;
	}

	/*音量调节*/

	#valCon{
	    width: 75%;
	    position: absolute;
	    left: 35px;
	    top: 17px;
	    background: rgba(10, 10, 10, 0.79);
	    border-radius: 99px;
	    z-index:50;
		visibility:hidden;  
	}

	#lrcConP{
		position:relative;
		padding:0px 35px;
		width:100%;
		height:100%;
		overflow:auto;
	}
	#lrcConP_content{
		text-align:center;
		p{
			margin:10px 0;
			line-height:1.6;
		}
	}
}

@toolbarHeight:56px;

#processBar{
  -webkit-tap-highlight-color:rgba(255,255,255,0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;

	width:100%;
	position:absolute;
	bottom:69px;

	@ftsize:16px;
	#timer{
		padding:0 5px;
		float:left;
		font-size:@ftsize;
	}
	#totalTime{
		padding:0 5px;
		float:right;
		font-size:@ftsize;		
	}

}

//h5progess

.processbody-con{
	position:relative;
	overflow:auto;
	@topH:5px;
	@size:4px;
	.radiousProcess(@r:50px){
		border-radius:@r;
	}
	.processbody-bg{
		margin:@topH 0;
		height:@size;
		width:100%;
		background-color:rgba(160, 160, 162, 0.52);	
		.radiousProcess;		
	}

	.processbody-fw{
	
		.radiousProcess;
		position:absolute;
		top:@topH;
		height:@size;
		background:#f44336;
		width:80%;

		.processDot{
			width:10px;
			height:10px;
			border-radius:5px;
			background-color:white;
			border:1px solid black;
			border-color:rgba(214, 209, 209, 0.6);		
			position:absolute;
			top:-(10px-@size)/2;
			right:-(10px-@size)/2;
		}

		.processDot::after{
			position:relative;
			margin:50%;
			left:-2px;
			top:-2px;
			content:" ";
			display:block;
			width:4px;
			height:4px;
			background-color:#f44336;
			border-radius:2px;
		}			
	}	
}

#toolbar{
	background-color:white;
	display:block;
	width:100%;
	height:20%;
	max-height:66px;
	position:absolute;
	bottom:0;
	border-top:1px solid @middleGray;

	nav{
		line-height:100%;
		text-align:center;
		padding:10px 10px;
		overflow:auto;
	}
	
	nav button{
		font-size:2rem;
		margin:0px;
		padding:0px;
		width:12%;
	}

}


#maskLayer{
	transition:all 0.5s;
	display:none;
	top:0;
	left:0;
	width:100%;
	height:100%;	
	position:absolute;
	background-color:@middleGrayOpacity;
	z-index:60;
}

#bundleDioalg{
	transition:all 0.5s;
	z-index:60;
	width:100%;
	height:300px;
	position:absolute;
	bottom:-100%;
	.whiteOpacity(0.95);
	nav{
		text-align:center;
		width:100%;
		overflow:auto;
		border-bottom:1px solid rgba(185, 177, 177, 0.8);
		span{
			line-height:2.5;
		}
		button{
			background-color:transparent;
			float:right;
			font-size:25px;
			color:black;
			margin-top: 6px;
    		margin-right: 5px;			
		}
	}

	#vList{
		height:100%;
		overflow:auto;
		ul{
			.margin-padding-0;
			list-style:none;
			color:@middleGrayOpacity;
			font-size:1em;
			width:100%;
			li{
				overflow:hidden;
				white-space:nowrap;
				text-overflow:ellipsis;
				line-height:2.5;
				font-size:14px;
				letter-spacing:1px;
				padding:0px 10px;
				border-bottom:1px solid rgba(177, 177, 177, 0.6);
				span{
					float:right;
				}
			}
		}
	}

}

.tOn{
	color:#f44336;
}

//加载中
#loading{
	display:none;
	position:absolute;
	width:100%;
	height:40px;
	color:white;
	z-index:70;
	bottom:100px;
	div{
		border-radius:3px;
		padding:5px 5px 10px;
		width:70px;
		text-align:center;
		margin:0 auto;
		position:relative;
		background:rgba(0, 0, 0, 0.88);

	}

	div:before,div:after{

		border-radius:3px;
		content:" ";
		display:block;
		width:5px;
		height:5px;
		background:white;
		position:absolute;
		bottom:4px;
	}


	div:before{
		animation:loading-left 1s;
		animation-direction: alternate;
		animation-iteration-count:infinite;			
		left:15px;
	}

	div:after{
		animation:loading-right 1s;	
		animation-direction: alternate;
		animation-iteration-count:infinite;			
		right:15px;
	}
}


@keyframes loading-left
{
	from {
		left:15px;
	}
	to {
		left:50px;
	}
}

@keyframes loading-right
{
	from {
		right:15px;
	}
	to {
		right:50px;
	}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}




